<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="shortcut icon" type="image/x-icon" href="res/image/logo.png" />
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>离散数学虚拟仿真实验</title>
</head>
<script type="text/javascript"></script>
<script src="js/jQuery.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/echarts.js"></script>
<link rel="stylesheet" href="css/bootstrap.css"/>
<link rel="stylesheet" href="css/partialOrder.css"/>
<link rel="stylesheet" href="css/iconfont.css"/>
<body> 
<div class="mainView">
   <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="./index.html" style="font-size: 1.2rem;">二元关系仿真实验</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarsExample04">
            <ul class="navbar-nav mr-auto" style="width: 100%;justify-content: flex-end;">
                <li class="nav-item">
                    <a class="nav-link" href="./index.html">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./dualityRelation.html">表示方法</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./dualityJudge.html">性质判定</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./lexicalClosure.html" tabindex="-1" aria-disabled="true">闭包运算</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./equivalentRelation.html">等价关系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./compatibleRelation.html">相容关系</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="./partialOrder.html">偏序关系</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="modal" data-target="#myModal">知识点</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class="contentContainer" id="app">
        <div class="divHead col-sm-12 col-md-12 col-lg-12">
            <div class="rightHead col-sm-12 col-md-6 col-lg-6">
                <div class="w-100 h-100 d-flex shadow-lg" style="flex-wrap:wrap;padding:0px 10px;border-radius: 5px;">
                    <div class="form-group col-sm-12 col-md-12 col-lg-12 d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                        <label  class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入" style="font-weight:bold;">二元关系:</label>
                        <input class="form-control inputSet" type="text" v-model="relations" data-toggle="tooltip" title="例:{(1,1),(2,2),(3,3),(1,2),(2,3)}">
                    </div>
                    <div class="form-group col-sm-12 col-md-12 col-lg-10 d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                        <label  class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入" style="font-weight:bold;">集合:</label>
                        <input class="form-control inputSet" type="text" v-model="sets" data-toggle="tooltip" title="例:{1,2,3}">
                    </div>
                    <input  @click="relationShow" type="button" class="col-sm-6 col-md-6 col-lg-2 btn btn-primary btnShow" style="height:50px;margin-top:10px;"   id="submitBtn"   value="显示">
                    </input>
                </div>
            </div>
            <div class="leftHead col-sm-12 col-md-6 col-lg-6">
                <div class="w-100 h-100 d-flex" style="flex-direction:column;align-items: center;">
                    <div class="d-flex h-50 justify-content-around" style="width:100%;">
                        <div class="shadow-lg mb-1 conditionRes">
                            {{condition1}}
                        </div>
                        <div class="shadow-lg mb-1 conditionRes">
                            {{condition2}}
                        </div>
                        <div class="shadow-lg mb-1 conditionRes">
                            {{condition3}}
                        </div>
                    </div>
                    <div class="d-flex h-50 shadow-lg conditionRes" style="width:98%;font-weight:bold">{{result}}</div>
                </div>
            </div>
        </div>
        <div class="divBody col-sm-12 col-md-12 col-lg-12" >
            <!-- <div class="d-flex  shadow-lg pr-2" style="flex-wrap:wrap;">  
                <div class="form-group col-sm-10 col-md-10 col-lg-10 d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                    <label  class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入">二元关系:</label>
                    <input class="form-control inputSet" type="text" v-model="relations">
                </div>
                
            </div> -->
            <div class="d-flex w-100" style="flex-wrap:wrap;">
                <div class="examples shadow-lg" @click="showExample(index)" v-for="(item,index) in examples">样例{{index+1}}</div>
                <input  @click="equalityShow" type="button" class="btn btn-primary btnShow" style="height:50px;margin-top:10px;"   id="submitBtn1"   value="生成哈斯图"></input>
                <div class="form-group  d-flex justify-content-evenly" style="margin:0px;padding:10px;">  
                    <label  style="width:100px;" class="inputLabel" for="exampleInputName2" data-toggle="tooltip" title="请按格式输入">输入子集</label>
                    <input  style="width:200px;" class="form-control inputSet" type="text" v-model="cSets" data-toggle="tooltip" title="例:{1,2}">
                </div>
                
                <input  @click="DataShow" type="button" class="btn btn-primary btnShow" style="height:50px;margin-top:10px;"   id="submitBtn3"   value="特殊元素"></input>
            </div> 
            <div class="shadow-lg mw-100 d-flex" style="flex-wrap:wrap;width: 98vw;" v-if="isShowResult">
                <div class="col-sm-12 col-md-12 col-lg-6 contentLeft" style="background-color: white;">
                    <div class="echartsDiv" id="echartsDiv"></div>
                </div>
                <div class="col-sm-12 col-md-12 col-lg-6 contentRight" style="background-color: white;">
                    <div class="d-flex w-100 p-2" style="flex-wrap:wrap;">
                        <span style="margin-right:10px;font-size:20pt;" v-for="(item,index) in nodeList">第{{index+1}}层:{{item}};</span>
                    </div>
                    <p class="p-2" style="font-size:20pt;">COV A={{COVA}}</p>
                    <div v-show="showElement" class="p-2" style="font-size:20pt;">
                        <span style="margin-right:10px;">极大元:{{jiMax}};</span>
                        <span style="margin-right:10px;">极小元:{{jiMin}};</span>
                        <span style="margin-right:10px;">最大元:{{max}};</span>
                        <span style="margin-right:10px;">最小元:{{min}}</span>
                    </div>
                    <div v-show="showElement" class="p-2" style="font-size:20pt;">
                        <span style="margin-right:10px;">上  界:{{top}};</span>  
                        <span style="margin-right:10px;">下  界:{{bottom}};</span>
                        <span style="margin-right:10px;">上确界:{{topMin}};</span>
                        <span style="margin-right:10px;">下确界:{{bottomMax}};</span>
                    </div>
                </div>
            </div>     
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="doc/幻灯片21.PNG" alt="" style="width:100%;">
                <img src="doc/幻灯片22.PNG" alt="" style="width:100%;">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="max-width:300px;margin-top:40vh;">
        <div class="modal-content">
            <div class="modal-body">
                <p style="text-align: center; margin-bottom: 0px;">{{message}}</p>
            </div>
            <div class="modal-footer" style="padding: 0px;">
                <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script src="js/vue.js"></script>
<script type="module" src="js/partialOrder.js"></script>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
</body>
</html>